<template>
  <section class="bottom">
    <div class="bottom-item" v-for="(item, index) in list" @click="selectCompany(index)">
      <img class="factory-btn" :src="index === activeIndex ? item.imgSelected: item.img" :class="{'jumpDown': index === activeIndex}">
      <div class="park-name" :class="{'park-name-active': index === activeIndex}">{{ item.title }}</div>
      <Pedestal></Pedestal>
    </div>
  </section>
</template>

<script setup name="Bottom">
import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
import Pedestal from '@/components/pedestal/index.vue'
import { getAssetsFile } from "../../utils/utils.js"
import {treeConstruct} from "./Construct.ts";
import emitter from "@/utils/emitter.ts";
import {ElMessage} from "element-plus";

const activeIndex = ref(0)

const data = structuredClone(treeConstruct)
const list = reactive(data);

const emits = defineEmits(['itemClick'])
const proxy = getCurrentInstance()

const selectCompany = (index) => {
  // 根据key判断模块是否能切换
  if (list[index].key) {
    activeIndex.value = index
    emitter.emit('on-switch-bar', index);

  } else {
    ElMessage({
      message: '模块研发中，尽请期待',
      type: 'info'
    });
  }
}

onMounted(async () => {
  const data = list[0].children[0]
  emits('itemClick', {
    title: data.title,
    key: data.key,
    componentName: data.componentName,
    url: data.url,
    property: list[0]?.property
  })

})

</script>

<style scoped lang="scss">
.bottom {
  height: 7%;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 8;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: url('@/assets/imgs/bottom.png') no-repeat center;
  background-size: 100%;
  font-family: fangzheng;

  .bottom-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    margin: 0 80px;
    bottom: 70px;

    .park-name {
      font-size: 28px;
      font-weight: bolder;
      color: #ffffff;
    }

    .park-name-active {
      color: #8BE0FF;
    }

    .factory-btn {
      width: 90px;
      height: 100px;
      margin-bottom: 20px;
      cursor: pointer;
    }
  }
}

.jumpDown {
  animation: upDown 3s ease-out infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px)
  }
  100% {
    transform: translateY(0);
  }
}
</style>
